﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鼠标拖拽效果</title>
    <style>
        * {
			padding:0;
			margin:0;
		}
		.d_box {
			position:relative;
			box-sizing:border-box;
			height:3px;
			width:220px;
			background:#ccc;
			top:50%;
			margin-top:-1.5px;
		}
		.d_box.box3 {
			width:120px;
		}
		.d_bg {
			background:red;
			width:0;
			height:100%;
		}
		.d_cir {
			width:18px;
			height:18px;
			border:1px solid #ddd;
			background:#eee;
			cursor:pointer;
			position:absolute;
			border-radius:50%;
			top:-10px;
			left:0;
		}
		.d_cont {
			height:40px;
		}
		.wid-200 {
			width:200px;
			margin:0 auto;
		}
		.wid-250 {
			width:250px;
			margin:0 auto;
		}
		.wid-300 {
			width:300px;
			margin:0 auto;
		}
		.wid-400 {
			width:400px;
			margin:0 auto;
		}
		.toast {
			width:auto;
			height:auto;
			position:absolute;
			background:#373c42;
			color:#fff;
			font-size:13px;
			border-radius:5px;
			padding:3px 6px;
			z-index:100;
			font-family:'microsoft yahei','Arial Narrow',Arial,sans-serif;
		}
		.triangle {
			position:absolute;
			left:50%;
			border:4px solid transparent;
			border-top-color:#373c42;
			bottom:-8px;
			margin-left:-4px;
		}
		.hide {
			display:none;
		}
    </style>
</head>
<body>
    <div class="d_cont">
    <div class="d_box">
        <div class="d_bg">
            <div class="d_cir cir_1"></div>
        </div>
    </div>
</div>


<div class="wid-250">
    <div class="d_cont d_cont_1">
        <div class="d_box">
            <div class="d_bg">
                <div class="d_cir cir_2"></div>
            </div>
        </div>
    </div>
</div>


<div class="wid-200">
    <div class="d_cont d_cont_1">
        <div class="d_box">
            <div class="d_bg">
                <div class="d_cir cir_2"></div>
            </div>
        </div>
    </div>
</div>


<div class="wid-300">
    <div class="d_cont">
        <div class="d_box box3">
            <div class="d_bg">
                <div class="d_cir cir_3"></div>
            </div>
        </div>
    </div>
</div>


<div class="wid-300">
    <div class="d_cont">
        <div class="d_box box3">
            <div class="d_bg">
                <div class="d_cir cir_4"></div>
            </div>
        </div>
    </div>
</div>
<script>
// https://www.jq22.com/webqd5217
//触发
var drag = function(opt) {
    // this.el = document.getElementsByClassName(cls);
    this.el = document.querySelectorAll(opt.el);
    this.min = opt.min == 0 ? 0 : opt.min ? opt.min : 0;
    this.max = opt.max;
    this.type = opt.type || 'toast';
    this.init();
}
drag.prototype = {
    d: document,
    init: function() { //初始化
        var el = this.el,
            that = this,
            d = this.d;
        for (var i = 0; i < el.length; i++) {
            el[i].ontouchstart = function(e) { //moblie
                var w = that.dragStart(e, 'm');
                that.showInner();
                d.ontouchmove = function(e) {
                    that.dragMove(e, w, 'm');
                }
                d.ontouchend = function() {
                    that.dragEnd();
                }
            }
            el[i].onmousedown = function(e) { //pc
                var w = that.dragStart(e, 'p');
                that.showInner();
                // that.showModal(parseInt(parseInt(this.style.left) ? this.style.left : 0));
                d.onmousemove = function(e) {
                    that.dragMove(e, w, 'p');
                }
                d.onmouseup = function() {
                    that.dragEnd();
                }
            }
        }
    },
    showModal: function(m) { //跟随提示框
        var toast = this.target;
        var pre = toast.parentNode.parentNode,
            het, d = this.d,
            top = pre.offsetTop,
            wid = toast.offsetHeight,
            left = pre.offsetLeft + wid / 2,
            tLeft = toast.offsetLeft + pre.offsetLeft;
        this.toast = d.querySelector('.toast');
        if (!this.toast) { //为空时创建
            var div = d.createElement('div'),
                str = '<span>0</span><i class="triangle triangle_d"><i>';
            (div.className += 'toast', div.style.left = tLeft + 'px', d.body.appendChild(div), div.innerHTML = str);
            setTimeout(function() { //延迟获取toast宽宽
                het = div.offsetHeight;
                div.style.top = top - het - wid + 'px';
                this.toast = div;
            }, 0);
        } else {
            this.toast.className = this.toast.className.replace(/\s?hide/g, '');
            m = this.showText(m);
            this.toast.getElementsByTagName('span')[0].innerHTML = m; //文字填充
            _w, _h = this.toast.offsetHeight;
            // pad 为padding值 _w为元素宽度
            var pad = parseFloat(getStyle(this.toast, 'paddingLeft')),
                _w = getStyle(this.toast, 'width');
            _w = Object.prototype.toString.call(_w) == '[object Array]' ?
                _w[0] : (parseFloat(_w) + pad + pad).toFixed(2);
            tLeft = tLeft - _w / 2 + wid / 2;
            this.toast && (
                this.toast.style.top = top - _h - wid + 'px',
                this.toast.style.left = tLeft + 'px')
        }

        function getStyle(el, str) { //获取元素真实属性
            return window.getComputedStyle ? window.getComputedStyle(el, null)[str] :
                el.currentStyle[str] == 'auto' ? [el.offsetWidth] : el.currentStyle[str];
        }
    },
    dragStart: function(e, c) { //开始拖拽
        var e = e || window.event,
            m,
            src = e.srcElement || e.target,
            sX = c == 'p' ? (e.clientX || e.pageX) : (e.touches[0].clientX || e.touches[0].pageX);
        this.target = src; //当前点击元素
        return sX - src.offsetLeft;
    },
    dragMove: function(e, w, c) { //拖拽中
        var e = e || window.event,
            src = e.srcElement || e.target,
            nX = c == 'p' ? (e.clientX || e.pageX) : (e.touches[0].clientX || e.touches[0].pageX);
        var el = this.target,
            oWid = el.parentNode.parentNode.offsetWidth,
            m;
        this.size = oWid - el.offsetWidth; //尺寸
        m = nX - w;
        m = m < 0 ? 0 : m > oWid - el.offsetWidth ? oWid - el.offsetWidth : m;
        this.showModal(m);
        el.parentNode.style.width = m + 'px';
        el.style.left = m + 'px';
    },
    dragEnd: function() { //拖拽结束
        this.d.onmousedown = null;
        this.d.onmousemove = null;
        this.toast = this.d.querySelector('.toast');
        if (this.toast)
            this.toast.className += this.toast.className.indexOf('hide') == -1 ? ' hide' : '';
    },
    showInner: function() { //内容展示方式
        switch (this.type) {
            case 'toast':
                this.showModal(parseInt(parseInt(this.target.style.left) ? this.target.style.left : 0));
                break;
            default:
                console.log('无匹配');
                break;
        }
    },
    showText: function(txt) { //文字格式
        return (this.max / this.size * txt).toFixed(1);
    }
}

var cir2 = new drag({
    el: '.cir_2',
    max: 100
});
var cir2 = new drag({
    el: '.cir_3',
    max: 50
});
var cir2 = new drag({
    el: '.cir_4',
    max: 5
});
</script>
</body>
</html>